<template>
  <nut-popup v-model:visible="visible" position="bottom" round>
    <view class="bg-white rounded-t-[25rpx] p-[40rpx] box-border">
      <!-- 标题 -->
      <view class="text-center mb-[40rpx]">
        <text class="text-[36rpx] font-bold text-gray-800">选择支付方式</text>
      </view>

      <!-- 支付金额显示 -->
      <view class="bg-gray-50 rounded-[20rpx] p-[30rpx] mb-[40rpx] text-center">
        <text class="text-[28rpx] text-gray-600 block mb-[10rpx]">支付金额</text>
        <text class="text-[48rpx] font-bold text-red-500">¥{{ amount }}</text>
      </view>

      <!-- 余额信息 -->
      <view class="bg-blue-50 rounded-[20rpx] p-[30rpx] mb-[40rpx]">
        <view class="flex justify-between items-center">
          <text class="text-[28rpx] text-gray-700">当前余额</text>
          <text class="text-[32rpx] font-bold text-blue-600">¥{{ userBalance }}</text>
        </view>
        <view v-if="userBalance >= amount" class="mt-[15rpx]">
          <text class="text-[24rpx] text-green-600">余额充足，可使用余额支付</text>
        </view>
        <view v-else class="mt-[15rpx]">
          <text class="text-[24rpx] text-orange-600">余额不足，建议使用微信支付</text>
        </view>
      </view>

      <!-- 支付方式选择 -->
      <view class="space-y-[20rpx] mb-[40rpx]">
        <!-- 余额支付 -->
        <view 
          class="flex items-center justify-between p-[30rpx] border-2 rounded-[20rpx] transition-all cursor-pointer"
          :class="selectedMethod === 'balance' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 bg-white'"
          @click="selectMethod('balance')"
        >
          <view class="flex items-center">
            <IconFont name="wallet" class="text-[40rpx] text-blue-500 mr-[20rpx]" />
            <view>
              <text class="text-[30rpx] font-bold block">余额支付</text>
              <text class="text-[24rpx] text-gray-500">使用账户余额</text>
            </view>
          </view>
          <!-- 自定义单选按钮 -->
          <view class="w-[40rpx] h-[40rpx] rounded-full border-2 flex items-center justify-center"
                :class="selectedMethod === 'balance' ? 'border-blue-500 bg-blue-500' : 'border-gray-300 bg-white'">
            <view v-if="selectedMethod === 'balance'" class="w-[20rpx] h-[20rpx] rounded-full bg-white"></view>
          </view>
        </view>

        <!-- 微信支付 -->
        <view 
          class="flex items-center justify-between p-[30rpx] border-2 rounded-[20rpx] transition-all cursor-pointer"
          :class="selectedMethod === 'wechat' ? 'border-green-500 bg-green-50' : 'border-gray-200 bg-white'"
          @click="selectMethod('wechat')"
        >
          <view class="flex items-center">
            <IconFont name="wechat" class="text-[40rpx] text-green-500 mr-[20rpx]" />
            <view>
              <text class="text-[30rpx] font-bold block">微信支付</text>
              <text class="text-[24rpx] text-gray-500">使用微信支付</text>
            </view>
          </view>
          <!-- 自定义单选按钮 -->
          <view class="w-[40rpx] h-[40rpx] rounded-full border-2 flex items-center justify-center"
                :class="selectedMethod === 'wechat' ? 'border-green-500 bg-green-500' : 'border-gray-300 bg-white'">
            <view v-if="selectedMethod === 'wechat'" class="w-[20rpx] h-[20rpx] rounded-full bg-white"></view>
          </view>
        </view>
      </view>

      <!-- 按钮组 -->
      <view class="flex gap-[20rpx]">
        <nut-button 
          type="default" 
          size="large"
          class="flex-1 h-[80rpx] text-[30rpx]"
          @click.stop="handleCancel"
        >
          取消
        </nut-button>
        <nut-button 
          type="primary" 
          size="large"
          class="flex-1 h-[80rpx] text-[30rpx] bg-blue-500"
          @click.stop="handleConfirm"
          :disabled="!selectedMethod"
        >
          确认支付
        </nut-button>
      </view>
    </view>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import { useUserStore } from '@/store/user'

/**
 * 支付方式选择弹窗组件
 * 支持余额支付和微信支付两种方式
 * 根据用户余额自动推荐支付方式
 */

interface Props {
  modelValue: boolean
  amount: number
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', method: 'balance' | 'wechat'): void
  (e: 'cancel'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 用户store
const userStore = useUserStore()

// 弹窗显示状态
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 选中的支付方式
const selectedMethod = ref<'balance' | 'wechat'>('balance')

// 用户余额
const userBalance = computed(() => userStore.userInfo.balance || 0)

/**
 * 选择支付方式
 * @param method 支付方式
 */
const selectMethod = (method: 'balance' | 'wechat') => {
  selectedMethod.value = method
}

/**
 * 确认支付
 */
const handleConfirm = () => {
  if (!selectedMethod.value) {
    return
  }
  
  emit('confirm', selectedMethod.value)
  visible.value = false
}

/**
 * 取消支付
 */
const handleCancel = () => {
  emit('cancel')
  visible.value = false
}

/**
 * 监听弹窗显示状态，重置选择
 */
watch(visible, (newVal) => {
  if (newVal) {
    // 根据余额自动选择支付方式
    if (userBalance.value >= props.amount) {
      selectedMethod.value = 'balance'
    } else {
      selectedMethod.value = 'wechat'
    }
  }
})
</script>

<style lang="scss">
/* 自定义样式 */
</style>
